<template>
	<div class="app-container">

		<el-form :model="data.grouping" :inline="true" class="w-full" :label-width="language == 'en' ? '160' : '120'"
			:rules="data.rules" ref="ruleFormRef">

			<div>
				<el-form-item :label="$t('machine.types.name') + ':'" prop="mg_name" class="w-2/5">
					<el-input v-model="data.grouping.mg_name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
			</div>

			<div>
				<el-form-item :label="$t('machine.types.groupSort') + ':'" prop="sort" class="w-2/5">
					<el-input v-model="data.grouping.sort" placeholder="$t('machine.types.sinceSort')" clearable />
				</el-form-item>
			</div>

			<div>
				<el-form-item :label="$t('machine.types.groupDesc') + ':'" prop="desc" class="w-2/5">
					<el-input v-model="data.grouping.desc" :placeholder="$t('message.pleaseEnter')" clearable />
				</el-form-item>
			</div>

			<el-form-item :label="$t('machine.marketing.Applicable') + ':'" prop="m_id" class="w-2/5"
				v-prmis="'machine_group_mg_getList'">
				<el-select v-model="data.grouping.m_id" :placeholder="$t('message.pleaseSelect')" clearable filterable
					multiple @change="onoption">
					<template #header>
						<el-checkbox v-model="data.maccheckAll" :indeterminate="data.macindeterminate"
							@change="handleCheckAll">{{ $t('public.selectAll') }}</el-checkbox>
					</template>
					<el-option v-for="item in data.maclist" :key="item.m_id"
						:label="item.m_id + ' - ' + item.machine_name + ' ( ' + item.machine_id + ' )'"
						:value="item.m_id" />
				</el-select>
			</el-form-item>

			<div>
				<el-form-item :label="$t('machine.types.packetStates') + ':'" prop="status" class="w-2/5">
					<el-select v-model="data.grouping.status" :placeholder="$t('message.pleaseSelect')">
						<el-option :label="$t('public.enable')" :value="1" />
						<el-option :label="$t('public.disable')" :value="2" />
					</el-select>
				</el-form-item>
			</div>

			<div class="w-2/5 text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancel">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>

		</el-form>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getmachineList } from '@/api/machine';
import { addgroup, updategroup, getListgroupmg } from '@/api/machine_type';
import { useRouter, useRoute } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
const router = useRouter()
const route = useRoute()
let ruleFormRef = ref<any>()

let data = reactive({
	maccheckAll: false, // 设备全选
	macindeterminate: false, // 设备部分选中
	maclist: [], // 设备列表
	rules: { // 表单验证
		mg_name: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		desc: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' }
	},
	grouping: { // 分组信息
		mg_name: '',
		desc: '',
		sort: 1,
		status: 1,
		m_id: [],
		pid: 0
	},
})

// 获取分组信息
let getmactype = () => {
	if (route.query.l == undefined) {
		ElMessage({
			message: $t('message.invalidData'),
			type: 'error'
		})
		return
	}
	let query_obj = JSON.parse(decodeURI(route.query.l))
	if(query_obj.type == 'addSub'){
		data.grouping.pid = query_obj.info.mg_id
		return
	}
	if (query_obj.info != '') {
		data.grouping.mg_id = query_obj.info.mg_id
		data.grouping.mg_name = query_obj.info.mg_name
		data.grouping.desc = query_obj.info.desc
		data.grouping.sort = query_obj.info.sort
		data.grouping.status = query_obj.info.status
		data.grouping.pid = query_obj.info.pid
		data.grouping.m_id = []
		getListgroupmg({ mg_id: data.grouping.mg_id }).then(res => {
			if (res.state == 200) {
				for (let item of res.data) {
					data.grouping.m_id.push(item.m_id)
				}
			}
		})
	}

	getmachineList().then(res => {
		if (res.state == 200) {
			data.maclist = res.data
			if (data.grouping.m_id.length == data.maclist.length) {
				data.maccheckAll = true
				data.macindeterminate = false
			} else {
				if (data.grouping.m_id.length == 0) {
					data.maccheckAll = false
					data.macindeterminate = false
				} else {
					data.maccheckAll = false
					data.macindeterminate = true
				}

			}
		}
	})
}

// 选中设备
let onoption = () => {
	if (data.grouping.m_id.length == 0) {
		data.maccheckAll = false;
		data.macindeterminate = false;
	} else {
		if (data.grouping.m_id.length == data.maclist.length) {
			data.maccheckAll = true;
			data.macindeterminate = false;
		} else {
			data.maccheckAll = false;
			data.macindeterminate = true;
		}
	}
}

// 设备全选
let handleCheckAll = (val) => {
	if (val) {
		data.grouping.m_id = data.maclist.map(_ => _.m_id);
		data.maccheckAll = true
		data.macindeterminate = false
	} else {
		data.grouping.m_id = [];
	}
}

// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid, fields) => {
		if (valid) {
			data.grouping.sort = data.grouping.sort || 1

			let obj = {}

			for (let key in data.grouping) {
				if (key != 'm_id') {
					obj[key] = data.grouping[key]
				}
			}

			if (data.grouping.m_id.length != 0) {
				obj.m_id = data.grouping.m_id.join(',')
			}

			if (obj.mg_id == undefined) {
				// 添加分组
				addgroup(obj).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						})
						router.back()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			} else {
				// 修改分组
				updategroup(obj).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.modifySuccess'),
							type: 'success'
						})
						router.back()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			}
		}
	})
}

// 取消
let cancel = () => {
	data.grouping = { // 分组信息
		mg_name: '',
		desc: '',
		sort: 1,
		status: 1,
		m_id: []
	}
	router.back()
	getmactype()
}

getmactype()

</script>
